<template>
	<view class="upload-img">
		<view class="base-info">
			<view class="uni-flex uni-row uni-mb-5 delay-item">
				<view class="uni-flex uni-column left-info">
					<view class="text title">
						{{data.caseId}}<text v-if="data.selfId&&data.selfId.length">({{data.selfId}})</text>
					</view>
					<view class="uni-flex uni-row">
						<view class="date plain-number">{{data.flaightNo}}</view>
						<view class="date">{{data.flaightTime}}</view>
					</view>
				</view>
				<view class="text uni-flex right-status">
					<text class="status" style="background-color:#0c6eb7;border:solid 1px #0c6eb7;"
						v-if="data.eventType=='less'">少收</text>
					<text class="status" style="background-color:#85B100;border:solid 1px #85B100;"
						v-else-if="data.eventType=='more'">多收</text>
					<text class="status" style="background-color:#FF9800;border:solid 1px #FF9800;"
						v-else-if="data.eventType=='damage'">破损</text>
				</view>
			</view>
		</view>
		<view class="uni-pb-15">
			<uni-section title="旅客信息" type="line">
				<view style="margin: 0 40px;">
					<view><text style="color: #999;">姓名：</text>{{data.passengerName}}</view>
					<view class="uni-mt-2"><text style="color: #999;">ETKT：</text>{{data.ticketNo}}</view>
				</view>
			</uni-section>
			<uni-section title="赔偿明细" type="line">
				<view class="lst-pay-table">
					<view class="uni-flex uni-row  lst-pay-table-tr lst-pay-table-header">
						<view class="uni-flex">
							<view class="n">赔偿项目</view>
							<view class="m">赔偿金额（元）</view>
						</view>
					</view>
					<view v-for="(item1,idx1) in data.lstPayItem" :key="idx1" class="uni-flex lst-pay-table-tr">
						<view class="n">{{item1.name}}</view>
						<view class="m">{{item1.pay}}</view>
					</view>

				</view>
			</uni-section>
			<uni-section title="请签字" type="line">
				<view v-if="newAirCompanySig&&newAirCompanySig.length"
					style="border:dashed 1px #0c6eb7;margin: 0 10px;border-radius: 5px;height: 300px;position: relative;">
					<image class="image" mode="widthFix"
						style="max-width: 100%;max-height: 100%; position: absolute;top: 0;left: 0;"
						:src="data.airCompanySig" />
				</view>
				<view class="example-body" v-else
					style="border:dashed 1px #0c6eb7;margin: 0 10px;border-radius: 5px;height: 300px;position: relative;">

					<l-signature disableScroll v-if="data.caseId" ref="signatureRef" penColor="black" :penSize="5"
						:openSmooth="false"></l-signature>
				</view>
				<view class="uni-flex uni-mt-5" style="justify-content: center;">
					<button class="uni-btn uni-btn-small" @click="onClick('clear')" size="mini">清空</button>
					<button class="uni-btn uni-btn-small" @click="onClick('save')" type="primary"
						size="mini">保存</button>
				</view>
			</uni-section>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				saveSignUrl: "/event/aircompanysig/save",
				token: '',
				newAirCompanySig: '',
				data: {
					eventId: 1,
					logo: '/static/logo-temp1.png',
					flaightNo: 'CZ4039-' + 1,
					flaightTime: '2024-03-01 12:20:00',
					caseId: 'XNN240301101' + 1,
					selfId: 'XNN240301101' + 3,
					airCompanySig: 'https://tfroot1.oss-cn-beijing.aliyuncs.com/bi/586cfdab0cf28d5a233d4bd2/file/2024/03/12/b734f692d1134d46901a2111b3609bc0.jpg',
				},
				v: ''
			}
		},
		onLoad(e) {
			this.token = uni.getStorageSync('token')
			if (e.data) {
				this.data = JSON.parse(e.data);
				this.newAirCompanySig = this.data.airCompanySig
			}
		},


		methods: {
			async onClick(type) {
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							console.log(res.isEmpty)
							console.log(res)
							// 微信小程序-生成图片的临时路径
							// 执行图片转base64方法
							this.base64(res.tempFilePath, "png").then(res => {
								console.log(res, 'base64路径') //res是base64路径
								this.url = res
								console.log(res);
								let params = {
									token: this.token,
									eventId: this.data.eventId,
									imageBase64: this.url
								}
								this.$http.post(this.saveSignUrl, params).then(res => {
									// console.log(res)
									if (res.data.errcode == 0) {
										uni.showToast({
											title: '保存成功',
											icon: "success"
										})
									} else {
										uni.showToast({
											title: res.data.errmsg,
											icon: "none"
										})
									}
								})
							})

						}
					})

				} else {
					this.newAirCompanySig = ''
					this.$refs.signatureRef.clear()

				}
			},
			// 图片转64
			base64(url, type) {
				return new Promise((resolve, reject) => {
					wx.getFileSystemManager().readFile({
						filePath: url, //选择图片返回的相对路径
						encoding: 'base64', //编码格式
						success: res => {
							// resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
							resolve(res.data)
						},
						fail: res => reject(res.errMsg)
					})
				})
			}

		}
	}
</script>

<style lang="less" scoped>
	.lst-pay-table {
		border: solid 1rpx #cde0f5;
		border-bottom: none;
		box-sizing: border-box;
		margin:0 40px ;
	}
	
	
	.lst-pay-table-tr{
		border-bottom: solid 1rpx #cde0f5;
		font-size: 26rpx;
		text-align: center;
		
		.uni-flex {
			width: 100%;
		}
		.n {
			flex: 1;
			padding: 8rpx;
			border-right: solid 1rpx #cde0f5;
			word-wrap: break-word;
		}
		.m{
			width: 100px;
			padding: 8rpx;
		}
	}
	.lst-pay-table-header {
		background-color: #cde0f5;
		.n {
			border-right: solid 1rpx #fff;
		}
	
	}
</style>